<template>
    <div class="formBox">
        <div class="formItem">
            <h5>基本信息：</h5>
            <div style="margin-top:10px">
                <el-descriptions :column="3" size="small" border>
                    <el-descriptions-item label="计划编号">{{details.plantNumber}}</el-descriptions-item>
                    <el-descriptions-item label=" 每亩产量目标">{{details.yield}}</el-descriptions-item>
                    <el-descriptions-item label="预算成本">{{details.budgetFee?details.budgetFee.standardString:''}}(元)</el-descriptions-item>
                    <el-descriptions-item label="作物品种">{{details.cropName}}</el-descriptions-item>
                    <el-descriptions-item label="种植周期">{{details.plantStartTime}}~{{details.plantEndTime}}</el-descriptions-item>
                    <el-descriptions-item label="种植面积(亩)">{{details.landArea}}</el-descriptions-item>
                    <el-descriptions-item label="状态">{{details.statusMeaning}}</el-descriptions-item>
                    <el-descriptions-item label="创建人">{{details.realName}}</el-descriptions-item>
                    <el-descriptions-item label="创建时间">{{details.createTime}}</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <!-- <div class="formItem">
            <h5>选择种植地块：</h5>
            
            <table class="itemTableBox" style="margin-top: 10px;">
                <tr>
                    <th width="80">序号</th>
                    <th>地块名称</th>
                    <th>地块面积(亩)</th>
                    <th>地块质地</th>
                    <th>地块分组</th>
                    <th>位置</th>
                    <th>备注</th>
                </tr>
                <tr v-for="(dt,index) in details.headerLandList" :key="dt.plantHeaderLandId">
                    <td>{{index + 1}}</td>
                    <td>{{dt.farmLandName}}</td>
                    <td>{{dt.areaSize}}</td>
                    <td>{{dt.geologyName}}</td>
                    <td>{{dt.groupName}}</td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div> -->
        <div class="formItem" v-for="dt in stages" :key="dt.stageId">
            <h5>
                {{dt.stageName}}：
                <!-- <span>共计 3 块地，48.8 亩</span> -->
            </h5>
            <!-- <div class="mytips">提示：{{dt.stageDesc}}</div> -->
            <table class="itemTableBox">
                <tr>
                    <th width="50">序号</th>
                    <th width="180">选择地块</th>
                    <th width="150">农事事项</th>
                    <th width="150">描述事项</th>
                    <th width="100">预算费用(元)</th>
                    <th width="180">负责人</th>
                    <th>完成日期</th>
                    <th width="100">状态</th>
                </tr>
                <tr v-for="(dt2,index) in details.lineRspList" :key="dt2.plantLineId">
                    <template v-if="dt.stageId == dt2.stageId">
                        <td>{{index+1}}</td>
                        <td>
                            <span style="color: #333;" v-for="(dt3,num3) in dt2.lineLandRspList" :key="dt3.farmLandId">
                                {{dt3.farmLandName}}
                                <template v-if="num3<dt2.lineLandRspList.length-1">、</template>
                            </span>
                        </td>
                        <td>{{dt2.taskName}}</td>
                        <td>{{dt2.taskContent}}</td>
                        <td>{{dt2.budgetFee.amount}}</td>
                        <td>
                            <span style="color: #333;" v-for="(dt4,num4) in dt2.fuzeUserList" :key="dt4.fuzeUserId">
                                {{dt4.fuzeRealName}}
                                <template v-if="num4<dt2.fuzeUserList.length-1">、</template>
                            </span>
                        </td>
                        <td>{{dt2.taskStartTime}} ~ {{dt2.taskEndTime}}</td>
                        <td>
                            <template v-if="dt2.taskStatus=='UN_CONFIRM'">
                                <el-button class="myBtn" type="primary" plain @click="lineConfirm(dt2)">确认</el-button>
                            </template>
                            <template v-else>
                                <span style="color: #af031a;">{{dt2.taskStatusMeaning}}</span>
                            </template>
                        </td>
                    </template>
                </tr>
            </table>
        </div>
    </div>
</template>
<script setup>
import {ref,onMounted} from "vue"
import{useRouter,useRoute} from "vue-router"
import { useUserStore } from '@/pinia/modules/user'
import {get_plant_line_confirm} from '@/api/plant'
import { ElMessageBox } from 'element-plus'
import {message} from '@/utils/element'

const router = useRouter()
const route = useRouter()
const userStore = useUserStore()

const props = defineProps({
    details:{
        type:Object,
        default:{}
    },
    stages:{
        type:Array,
        default:[]
    },
    fn:Function
})

const lineConfirm = (plantLineItem)=>{
    ElMessageBox.confirm('确认计划吗？确认计划后系统生成农事！','提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await get_plant_line_confirm({
            plantHeaderId:props.details.plantHeaderId,
            plantLineIdList:[plantLineItem.plantLineId]
        })
        if(res.code ==0 || res.success){
            message('操作成功',2)
            props.fn()
        }else{
          message(res.message || '出错了',3)
        }
    })
}

</script>
<style lang="scss" scoped>
.formBox{
    margin: 0;
   .formItem{
        &+.formItem{
            margin-top: 20px;
        }
        h5{
            display: flex;
            font-size: 12px;
            align-items: center;
            height: 26px;
            margin: 0;
            padding: 0;
            &::before{
                content: '';
                display: block;
                width: 3px;
                background: #48b27a;
                height: 14px;
                margin: 0 3px 0 0;
            }
            span{
                font-weight: normal;
            }
        }
        .inputItem{
            display: flex;
            align-items: center;
            margin: 5px 0 0 0;
            .lable{
                span{
                    color: #f70808;
                }
            }
        }
        .mytips{
            font-size: 12px;
            color: #999;
            -ms-transform:scale(0.95); /* IE 9 */
            -webkit-transform: scale(0.95); /* Safari */
            transform: scale(0.95); /* 标准语法 */
            -webkit-origin: 0 0;
            transform-origin:0 0 ;
            margin: 10px 0 10px 0;
        }
        .itemTableBox{
            width: 100%;
            min-width: 1150px;
            border: 1px solid #ebeef5;
            border-collapse:collapse ;
            th,td{
                text-align: left; 
                span{
                    color: #f70808;
                }
            }
            th{
                background-color: #f5f7fa;
                height: 30px;
                padding: 0 8px;
                &+th{
                    border-left: 1px solid #ebeef5;
                }
            }
            td{
                text-align: left;
                padding:6px 8px;
                border-top: 1px solid #ebeef5;
                &+td{
                    border-left: 1px solid #ebeef5;   
                }
                
            }
            .tbItemFlex{
                display: flex;
                align-items: center;
                .el-icon{
                    cursor: pointer;
                    &:hover{

                    }
                }
            }
        }
   } 
   .cbjs{
    padding: 15px 0 0 0;
    b{
        font-size: 16px;
    }
   }
}
</style>